import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import SizeUtils from '../common/SizeUtils';
import TComponent from './TComponent';

const CLICK_TEXT = {hide:"点击展开", show:"点击收回"};
const CLICK_STATE = {
  hide:0,
  show:1,
};

export default class TClickShowText extends TComponent {
  constructor(props) {
    super(props);

    this._hideNumberOfLines = 5;
    this._showNumberOfLines = 100;

    // this.state.showContent = "阿斯顿放假啦煞风景啊三六九等法拉盛家里的风景阿拉斯加发神经了打飞机啊睡懒觉风口浪尖啊谁来打飞机啊三六九等放假啊舒服撒的";
    this.state.showContent = this.props.content;
    this.state.clickText = "";
    this.state.clilckState = -1;
    this.state.numberOfLines = 100;
    this.state.lineHeight = this.props.style.lineHeight ? this.props.style.lineHeight : SizeUtils.translateDesignWidthToCode(40);
  }

  componentWillUpdate(nextProps, nextState) {
    if(this.props.content != nextProps.content) {
      nextState.showContent = nextProps.content;
      nextState.clilckState = -1;
      nextState.clickText = "";
      nextState.numberOfLines = 100;
      nextState.lineHeight = nextProps.style.lineHeight ? nextPropss.style.lineHeight : SizeUtils.translateDesignWidthToCode(40);
    }
  }

  render() {
    return (
      <View style={{flexDirection:"column"}}>
        <Text style={[{lineHeight:this.state.lineHeight}, this.props.style]} numberOfLines={this.state.numberOfLines} ref={
                            (ref) => {
                              this._text = ref;
                            }
                          } onLayout={this._onTextLayout.bind(this)}>
          {this.state.showContent}
        </Text>
        {this._renderClickButton()}
      </View>
    )
  }

  _onTextLayout(event) {
    if(this.state.clilckState < 0 &&
        event.nativeEvent.layout.height > this._hideNumberOfLines * (this.state.lineHeight + 1)) {
      this.setState({
        clickText:CLICK_TEXT.hide,
        clilckState:CLICK_STATE.hide,
        numberOfLines:this._hideNumberOfLines,
      })
    }
  }

  _renderClickButton() {
    if(this.state.clilckState < 0) {
      return;
    }
    return (
      <TouchableOpacity style={{paddingTop:SizeUtils.translateDesignHeightToCode(20),
          paddingLeft:SizeUtils.translateDesignHeightToCode(20),
          paddingRight:SizeUtils.translateDesignHeightToCode(20),
          flexDirection:"row", justifyContent:"flex-end"}} onPress={this._onPressClickButton.bind(this)}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(20),
            color:"#666666"}}>
          {this.state.clickText}
        </Text>
      </TouchableOpacity>
    )
  }

  _onPressClickButton() {
    if(this.state.clilckState === CLICK_STATE.show) {
      this.setState({
        clilckState:CLICK_STATE.hide,
        clickText:CLICK_TEXT.hide,
        numberOfLines:this._hideNumberOfLines,
      })
    }
    else {
      this.setState({
        clilckState:CLICK_STATE.show,
        clickText:CLICK_TEXT.show,
        numberOfLines:this._showNumberOfLines,
      })
    }
  }
}
